<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	html{
		background-color: #EDEDED;
		margin: 0;
		padding: 0;
	}
	.box{
		width: 850px;
		height: 500px;
		margin: 50px auto;
	}
	.fristbox{
		width:100%;
		float: left;
		margin-top: 5px;
		background-color: rebeccapurple
	}
	.sthhave{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: none
	}
	.smbox{
		width: 32%;
		background-color: skyblue
	}
	.sthhaveother{
		display: grid;
		grid-template-columns: 1fr 4fr 1fr
	}
	.beside{
		width: 50px;
		height: 50px;
		position: fixed;
		z-index: 1;
		bottom: 100px;
		right: 0;
		background-color: black;
		color: white
	}
	</style>
<body>
	<div class="beside">《 <br>侧边栏</div>
	<div class="box">
		<div class="fristbox" style="height:50px;color: white">上+中+下</div>
		<div class="fristbox" style="height:400px;"></div>
		<div class="fristbox" style="height:30px;"></div>
	</div>
	<div class="box">
		<div class="fristbox" style="height:400px;width: 200px; color: white">左+右</div>
		<div class="fristbox" style="height:400px;width: 640px;margin-left:5px"></div>
	</div>
	<div class="box">
		<div class="fristbox" style="height:50px;color: white">上+中+下</div>
		<div class="fristbox sthhave" style="height:400px;background: none">
			<div class="smbox"></div>
			<div class="smbox"></div>
			<div class="smbox"></div>
		</div>
		<div class="fristbox" style="height:30px;"></div>
	</div>
	<div class="box">
		<div class="fristbox" style="height:50px;color: white">上+中+下</div>
		<div class="fristbox sthhaveother" style="height:400px;background: none">
			<div style="background-color:skyblue;margin:5px"></div>
			<div style="background-color:skyblue;margin:5px"></div>
			<div style="background-color:skyblue;margin:5px"></div>
		</div>
		<div class="fristbox" style="height:30px;"></div>
	</div>
</body>
</html>
